<template>
  <div class="main pb20 pt116">
    <div class="padding-tb-15">
      <Breadcrumb separator="">
        <BreadcrumbItem>当前位置</BreadcrumbItem>
        <BreadSeparator>:</BreadSeparator>
        <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
        <BreadSeparator>></BreadSeparator>
        <BreadcrumbItem>人员锁定</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <Collapse v-model:activeKey="activeKey" expandIconPosition="right">
      <CollapsePanel key="1" header="筛选条件">
        <div class="comp-query">
          <div class="comp-query-form">
            <Form :wrapper-col="{ span: 18 }">
              <Row :gutter="[24, 24]">

                <Col :span="8">
                  <FormItem label="工程名称">
                    <Input v-model:value="queryParam.activityName" placeholder="请输入工程名称" />
                  </FormItem>
                </Col>

                <Col :span="8">
                  <FormItem label="人员姓名">
                    <Input v-model:value="queryParam.name" placeholder="请输入人员姓名" />
                  </FormItem>
                </Col>

                <Col :span="8">
                  <FormItem label="角色" class="my">
                    <Select v-model:value="queryParam.type">
                      <Option value="">不分角色</Option>
                      <Option value="JSHD_PER_ROLE_0901">施工项目经理</Option>
                      <Option value="JSHD_PER_ROLE_0201">监理总监</Option>
                      <Option value="JSHD_PER_ROLE_1101">工程总承包项目负责人</Option>
                    </Select>
                  </FormItem>
                </Col>


              </Row>

              <Row :gutter="[24, 14]">
                <Col :span="8">
                  <FormItem label="身份证号">
                    <Input v-model:value="queryParam.cardNo" placeholder="请输入人员身份证号码" />
                  </FormItem>
                </Col>


                <Col :span="16" class="text-right">
                  <Button type="primary" ghost @click="handleReset">重置</Button>
                  <Button type="primary" @click="handleSearch">立即查询</Button>
                </Col>
              </Row>

              <Row :gutter="[24, 14]">
                <Col :span="4">
                  <p class="mb0">查询结果：共<span class="red">{{pagination.total}}</span>条数据</p>
                </Col>


                <Col :span="16" class="text-left">
                  <span class="red">温馨提示：企业在建设云办理完竣工验收业务，等待24小时后，锁定人员方可自动解锁，请耐心等待。</span>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
      </CollapsePanel>
    </Collapse>

<!--<a target="_blank" :href="`/activity/${item.activityId}`">{{ item.actiName }}</a>   -->
    <div class="comp-table">
      <List
          item-layout="horizontal"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"

      >
        <template #renderItem="{ item , index}">
          <ListItem>
            <div class="staffItem">
              <div class="top">
                <div class="xin" :style="{ background: color[index%4] }">{{ str1(item.staffName) }}</div>
                <div class="name">
                  <h3>
                    <b class="hover-blue mr8">
                      <router-link target="_blank" :to="{ path: `/staff/${item.staffId}` }"
                      >{{ item.staffName  }}</router-link>
                    </b>
                    <Tag color="processing">{{ item.lockRoleName }}</Tag>
                  </h3>
                  <p>{{ item.cardNo }}</p>
                </div>
              </div>
              <div class="bot">
                <h3 class="nowrap" :title="item.projectName">工程名称：<router-link target="_blank"
                  :to="{ path: `/activity/${item.activityId}` }">{{ item.actiName  }}</router-link>
                </h3>
                <h3 class="nowrap">锁定日期：<span class="blue">{{ parseTime(item.lockDate) }}</span></h3>
                <p class="nowrap" :title="item.actiName">项目名称：<router-link target="_blank"
                  :to="{ path: `/pro/${item.projectId}` }">{{ item.projectName  }}</router-link>
                </p>
                <p class="nowrap" :title="item.utakeUnitName">所在企业：<router-link target="_blank"
                  :to="{ path: `/company/${item.utakeUnitId}` }">{{ item.utakeUnitName  }}</router-link>
                </p>
                <p class="nowrap">企业角色：{{ item.utakeUnitRoleName }}</p>
              </div>
            </div>
          </ListItem>
        </template>
      </List>
    </div>

  </div>
</template>

<script lang="ts" >
import { defineComponent, ref,  onMounted, reactive } from "vue";
import { Row, Col, Form, Input, Button, Cascader, Collapse, Breadcrumb, List , Select , Tag } from "ant-design-vue";
import { getStaffLockListApi } from '/@/api/servicemore';
import { parseTime } from '/@/utils';

// type
interface queryConfig {
  activityName: string;
  name:string;
  type: string;
  cardNo: string;
  current: number;
  size: number;
}


export default defineComponent({
  components: {
    Row,
    Col,
    Form,
    FormItem: Form.Item,
    Input,
    Button,
    Cascader,
    Collapse,
    CollapsePanel:Collapse.Panel,
    Breadcrumb,
    BreadcrumbItem:Breadcrumb.Item,
    BreadSeparator:Breadcrumb.Separator,
    List,
    ListItem: List.Item,
    Select,Option: Select.Option,
    Tag
  },
  setup() {
    const color:string[] = ['#E35C5E','#6A8BFC','#46BBFE','#EB9E35'];
    const activeKey = ref(['1']);
    const loading = ref<boolean>(true);
    const value = ref<string[]>([]);
    const dataSource = ref<unknown[]>([]);
    const dictionary = reactive({
      type:[]
    })
    const pagination = ref({
      current: 1,
      total: 0,
      onChange: (page: number) => {
        pagination.value.current = page;
        queryParam.current = page;
        getTableList();
      },
      pageSize: 12
    })


    let queryParam = reactive<queryConfig>({
      activityName:'',
      type: "",
      name:'',
      cardNo:'',
      current: 1,
      size: 12
    })

    const getTableList = async () => {
      loading.value = true;
      let data = await getStaffLockListApi(queryParam);
      pagination.value.total = data.total;
      dataSource.value = data.records;
      loading.value = false;
    }

    const handleSearch = () => {
      queryParam.current = 1;
      pagination.value.current = 1;
      getTableList();
    }

    const handleReset = () => {

      value.value = [];
      pagination.value.current = 1;
      Object.assign(queryParam,{
        activityName:'',
        name:'',
        cardNo:'',
        type: "",
        current: 1
      })
      getTableList();
    }
    const str1 = (srt:string) =>{
      return  srt.substr(0,1)
    }



    onMounted(() => {
      getTableList();
    });


    return {
      activeKey,queryParam, dataSource, loading,
      pagination , getTableList, handleSearch,color,
      handleReset , value  , dictionary , parseTime , str1
    };
  },
});
</script>

<style lang="less" scoped>

::v-deep(.ant-col) {
  .ant-form-item.my {
    .ant-form-item-control-wrapper {
      flex: 0 0 83%;
      max-width: 83%;
    }
  }
}

.comp-query {
  padding: 2px 5px;
  background: @white;

  ::v-deep(.ant-form-item-label) {
    > label {
      color: @grey;
    }
  }

  ::v-deep(.ant-form-item) {
    margin-bottom: 0;
  }

  ::v-deep(.ant-btn) {
    margin-right: 16px;

    &:last-child {
      margin-right: 22px;
    }
  }
}

.comp-table {
  padding: 0 ;
  margin-top: 20px;
}

::v-deep(.ant-list-items){
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: start;

  .ant-list-item{
    width: 32.5%;
    padding: 0;
    margin-right: 15px;
    margin-bottom: 20px;
    border-bottom: none;

    &:nth-child(3n){
      margin-right: 0;
    }
  }
}

.staffItem{
  width: 100%;
  height: 268px;
  padding: 17px;
  background: #FFF;
  border: 1px solid #EDEFF2;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);

  .top{
    display: flex;

    .xin{
      width: 52px;
      height: 52px;
      margin-right: 10px;
      font-size: 25px;
      line-height: 50px;
      color: white;
      text-align: center;
      background: #E35C5E;
      border-radius: 8px;

    }
  }

  .bot{
    padding: 15px 15px 10px;
    background: #F5FAFF;

    h3{
      margin-bottom: 5px;
      font-size: 16px;
      font-weight: bold;
    }

    p{
      margin-bottom: 5px;
      font-size: 14px;
      color: #777;
    }
  }

  .hover-blue:hover{
    color: @blue;
  }
}

</style>
